<template>
  <el-form v-if="control" ref="controlEdit" :model="control" :rules="rules" label-width="120px">
    <el-row :gutter="8">
      <el-col :span="14">
        <el-card header="基础配置">
          <el-form-item label="标签文本" prop="Name">
            <el-input v-model="control.Name" :maxlength="50" placeholder="标签文本" />
          </el-form-item>
          <el-form-item label="说明" prop="Show">
            <el-input v-model="control.Show" :maxlength="50" placeholder="说明" />
          </el-form-item>
          <el-form-item label="宽度" prop="Width">
            <el-input v-model="control.Width" :maxlength="50" placeholder="宽度">
              <span slot="suffix">px</span>
            </el-input>
          </el-form-item>
        </el-card>
        <el-card header="报表范围" style="margin-top: 10px;">
          <el-table
            :data="relationList"
            style="width: 100%"
            borderd
          >
            <el-table-column prop="Name" label="关联报表" min-width="150" align="center" />
            <el-table-column prop="ColId" label="筛选字段" min-width="200" align="center">
              <template slot-scope="scope">
                <formColChiose
                  v-model="scope.row.ColId"
                  :show-mode="showMode"
                  :form-id="scope.row.FormId"
                  :cur-form-id.sync="scope.row.CurFormId"
                  :func-type="funcType"
                  :filter-data-type="dataType"
                  :is-mulite="isMulite"
                />
              </template>
            </el-table-column>
            <el-table-column prop="Mode" label="筛选关系" min-width="120" align="center">
              <template slot-scope="scope">
                <enumItem
                  v-model="scope.row.Mode"
                  :dic-key="EnumDic.QueryFilterMode"
                  :limit="filterMode"
                  sys-head="form"
                  placeholder="筛选关系"
                />
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
      <el-col :span="10">
        <controlSet ref="controlSet" :configs="setTemplate" :control-set="contrSet" />
      </el-col>
    </el-row>
  </el-form>
</template>

<script>
import formColChiose from '@/customForm/components/form/formColChiose.vue'
import { GetForm } from '@/customForm/api/pageLayout'
import { EnumDic } from '@/customForm/config/formConfig'
import { config, limit } from '@/customForm/config/searchControlConfig'
import controlSet from './controlSet.vue'
export default {
  components: {
    formColChiose,
    controlSet
  },
  props: {
    contentWidth: {
      type: Number,
      default: null
    },
    pageId: {
      type: String,
      default: null
    },
    source: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      EnumDic,
      control: null,
      relationList: [],
      dataType: null,
      filterMode: null,
      searchDataType: 0,
      showMode: null,
      funcType: null,
      setTemplate: null,
      contrSet: null,
      isMulite: false,
      relation: null,
      rules: {
        ColNum: [
          {
            required: true,
            message: '标签文本不能为空！',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  watch: {
    source: {
      handler(val) {
        if (val) {
          this.resetForm()
        } else {
          this.control = null
        }
      },
      immediate: true
    }
  },
  mounted() { },
  methods: {
    resetForm() {
      const set = {
        Id: this.source.Id,
        Name: this.source.Name,
        Show: this.source.Show,
        Width: null
      }
      if (this.source.ControlConfig && this.source.ControlConfig.Search) {
        const t = this.source.ControlConfig.Search
        this.relation = t.FormRelation ?? []
        t.Width = t.ControlSet ? t.ControlSet.Width : null
        this.contrSet = t.ControlSet
      } else {
        this.relation = []
        this.contrSet = null
      }
      this.control = set
      this.initLimit()
      this.loadForm()
    },
    initLimit() {
      this.setTemplate = config[this.source.Code]
      const t = limit[this.source.Code]
      if (t) {
        this.funcType = t.funcType
        this.showMode = t.showMode
        this.dataType = t.dataType
        this.filterMode = t.filterMode
        this.isMulite = t.isMulite ?? false
      } else {
        this.funcType = null
        this.isMulite = false
        this.showMode = null
        this.dataType = null
        this.filterMode = null
      }
    },
    async loadForm() {
      const list = await GetForm(this.pageId)
      this.relationList = list.map(c => {
        const t = this.relation.find(a => a.LayoutId === c.Id)
        let mode = null
        let colId = null
        if (t != null) {
          mode = t.Mode
          colId = t.ColId
        }
        if (mode == null && this.filterMode != null && this.filterMode.length > 0) {
          mode = this.filterMode[0]
        }
        if (!this.isMulite && colId && colId.length > 0) {
          colId = colId[0]
        }
        return {
          LayoutId: c.Id,
          Name: c.Name,
          FormId: Array.isArray(c.FormId) ? c.FormId : [c.FormId],
          Mode: mode,
          CurFormId: null,
          ColId: colId
        }
      })
    },
    save() {
      const that = this
      return new Promise((resolve, reject) => {
        that.$refs['controlEdit'].validate((valid) => {
          if (valid) {
            const data = that.getData()
            if (data == null) {
              reject()
              return
            }
            resolve(data)
          } else {
            reject()
            return false
          }
        })
      })
    },
    getData() {
      const data = {
        Name: this.control.Name,
        Show: this.control.Show,
        WidthRatio: 1,
        HeightGrid: 10,
        ControlConfig: {
          Search: null
        }
      }
      const set = this.$refs.controlSet.getValue()
      set.Width = this.control.Width
      data.ControlConfig.Search = {
        ControlSet: set,
        DataType: this.searchDataType,
        FormRelation: this.relationList.filter(c => c.ColId != null && c.ColId !== '').map(c => {
          return {
            LayoutId: c.LayoutId,
            FormId: c.CurFormId && Array.isArray(c.CurFormId) === false ? [c.CurFormId] : c.CurFormId,
            ColId: c.ColId && Array.isArray(c.ColId) === false ? [c.ColId] : c.ColId,
            Mode: c.Mode
          }
        })
      }
      return data
    }
  }
}
</script>
